<template>
	<view>
		<div class="nav">
      <uni-icons
        class="icon"
        @click="huitui"
        color="#fff"
        ;
        type="back"
        size="20"
      ></uni-icons>
      <text class="fabu"> 支付</text>
    </div>
	<view class="wein"> 
         <view class="yuan">
			<uni-icons color="#fff" type="checkmarkempty" size="120"></uni-icons>
		 </view>
		 <uni-title type="h2" title="支付成功" align="center"></uni-title>
         <view class="tit">
			<view class="tits" v-for="(item,index) in titles" :key="index">
			 <view>{{ item.title }}</view>
			 <view>{{ item.num }}</view>
			</view>
		 </view>
		 <view class="bbb">
          <button class="btn btns">查看订单</button>
          <button class="btn" @click="jixu">继续发布</button>
		 </view>
	</view>
	</view>
</template>

<script setup>
	import { reactive} from 'vue';
const path = uni.getStorageSync('path')

const titles = reactive([
	{
		title:'订单编号',
		num:'158959465541515'
	},
	{
		title:'订单金额',
		num:'10:00'
	},
	{
		title:'支付方式',
		num:'微信'
	},
	{
		title:'支付时间',
		num:new Date().toLocaleDateString()
	}
])

	const huitui = () => {
  uni.navigateTo({ url:path, })
}


//继续发布
const jixu= ()=>{
	uni.navigateTo({ url:path, })
}

</script>

<style lang="scss">
 .nav {
    width: 100vw;
    height: 100px;
    background: linear-gradient(to right, #3e85ef, rgb(46, 175, 255));
    display: flex;
    position: relative;
    .fabu {
      position: absolute;
      left: 50%;
      top: 60%;
      transform: translate(-50%, -50%);
      color: #fff;
    }
    .icon {
      position: absolute;
      top: 50%;
      left: 10px;
    }
  }
  .wein{
    width: 100vw;
	height: 700px;
	box-sizing: border-box;
	padding: 20px;
	.yuan{
		width: 130px;
		height: 130px;
		background-color: #36cc8d;
		border-radius: 65px;
		margin: 0 auto;
		text-align: center;
		line-height: 130px;
	}
	.tit{
		width: 90%;
		height: 200px;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		margin-top: 15px;
     .tits{
		width: 100%;
		height: 25%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	 }
	}
	.bbb{
		width: 100%;
		height: 100px; 
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 40px;
		.btn{
			width: 45%;
			height: 50px;
			border: 1px solid #138bec;
			background: #138bec;
			border-radius: 25px;
			color: #fff;
			box-shadow: 5px 5px 5px 0px #adaaaa;
		}
		.btns{
			background-color: #fff;
			color: #138bec;
		}
	}
  }
</style>
